<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>模板文件上传 demo2</title>
</head>
<body>
<h1>模板文件上传 demo2</h1>
<div>
    <h4>登录获取token</h4>
    <label>token:</label>
    <input id="token" type="text" name="token">
    <button onclick="login()">登录</button>
</div>
<div style="padding-top: 30px">
    <h4>上传整体模板</h4>
    <label>文 件:</label>
    <input id="dir" type="file" name="dir" webkitdirectory mozdirectory/>
    <input type="button" value="提交" onclick="uploadDir()">
    <p id="uploadDir"></p>
</div>
<div style="padding-top: 30px">
    <h4>设置整体模板</h4>
    <label>模板列表:</label>
    <button onclick="show()">show</button>
    <p id="tempList"></p>
    <br>
    <label>配置文件:</label>
    <button onclick="submitTemp()">submit</button>
    <input id="parkId" type="text" name="parkId" placeholder="parkId">
    <input id="packageDataId" type="text" name="packageDataId" placeholder="packageDataId">
    <p id="setTemp"></p>
</div>
<div style="padding-top: 30px">
    <h4>设置页面模板</h4>
    <label>所有页面:</label>
    <button onclick="getPages()">getPages</button>
    <p id="getPage"></p>
    <br>
    <label>更新页面:</label>
    <input id="templateId" type="text" name="templateId" placeholder="templateId">
    <br>
    <br>

    <label>js&nbsp;&nbsp;</label>
    <input id="js" type="file" name="js"/>
    <button onclick="updateJs()">update</button>
    <input id="jsId" type="text" name="jsId" placeholder="jsId"><br>
    <br>

    <label>json</label>
    <input id="json" type="file" name="js"/>
    <button onclick="updateJson()">update</button>
    <input id="jsonId" type="text" name="jsonId" placeholder="jsonId"><br>
    <br>

    <label>wxml</label>
    <input id="wxml" type="file" name="wxml"/>
    <button onclick="updateWxml()">update</button>
    <input id="wxmlId" type="text" name="wxmlId" placeholder="wxmlId"><br>
    <br>

    <label>wxss</label>
    <input id="wxss" type="file" name="wxss"/>
    <button onclick="updateWxss()">update</button>
    <input id="wxssId" type="text" name="wxssId" placeholder="wxssId"><br>
    <br>

    <button onclick="updatePage()">updatePage</button>
    <p id="updatePage"></p>
</div>
<script>
    const baseUrl = 'https://api.joinzs.com/mpgenerator';
    // const baseUrl = 'http://localhost:12000/mpgenerator';
    const userId = 'yi4h1ckav469x8erl57jkdxdeanlat5a';

    function updateJs() {
        const token = document.querySelector('#token').value.trim();
        const js = document.querySelector('#js');
        const jsId = document.querySelector('#jsId');
        let formData = new FormData();
        formData.append('file', js.files[0]);
        ajax('POST', baseUrl + '/template/uploadFile', token, null, formData, function (data) {
            jsId.value = data.result.dataId;
        })
    }

    function updateJson() {
        const token = document.querySelector('#token').value.trim();
        const json = document.querySelector('#json');
        const jsonId = document.querySelector('#jsonId');
        let formData = new FormData();
        formData.append('file', json.files[0]);
        ajax('POST', baseUrl + '/template/uploadFile', token, null, formData, function (data) {
            jsonId.value = data.result.dataId;
        })
    }

    function updateWxml() {
        const token = document.querySelector('#token').value.trim();
        const wxml = document.querySelector('#wxml');
        const wxmlId = document.querySelector('#wxmlId');
        let formData = new FormData();
        formData.append('file', wxml.files[0]);
        ajax('POST', baseUrl + '/template/uploadFile', token, null, formData, function (data) {
            wxmlId.value = data.result.dataId;
        })
    }

    function updateWxss() {
        const token = document.querySelector('#token').value.trim();
        const wxss = document.querySelector('#wxss');
        const wxssId = document.querySelector('#wxssId');
        let formData = new FormData();
        formData.append('file', wxss.files[0]);
        ajax('POST', baseUrl + '/template/uploadFile', token, null, formData, function (data) {
            wxssId.value = data.result.dataId;
        })
    }

    function updatePage() {
        const token = document.querySelector('#token').value.trim();
        const templateId = document.querySelector('#templateId').value;
        const jsId = document.querySelector('#jsId').value;
        const jsonId = document.querySelector('#jsonId').value;
        const wxmlId = document.querySelector('#wxmlId').value;
        const wxssId = document.querySelector('#wxssId').value;
        const formData = JSON.stringify({'templateId': templateId,'jsId': jsId,'jsonId': jsonId,'wxmlId': wxmlId,'wxssId': wxssId});
        const updatePage = document.querySelector('#updatePage');
        ajax('POST', baseUrl + '/template/setTemplate', token, 'application/json', formData, function (data) {
            updatePage.innerHTML = JSON.stringify(data);
        });

    }

    function getPages() {
        const token = document.querySelector('#token').value.trim();
        const parkId = document.querySelector('#parkId').value.trim();
        const formData = JSON.stringify({'parkId': parkId});
        const getPage = document.querySelector('#getPage');
        getPage.innerHTML = '';
        ajax('POST', baseUrl + '/template/getTemplates', token, 'application/json', formData, function (data) {
            for (let i in data.result) {
                const templateId = data.result[i].templateId;
                const title = data.result[i].title;
                const description = data.result[i].description;
                const type = data.result[i].type;
                getPage.innerHTML += templateId + ' ' + title + ' ' + description + ' ' + type + '<br>';
            }
        });
    }

    function submitTemp() {
        const token = document.querySelector('#token').value.trim();
        const parkId = document.querySelector('#parkId').value.trim();
        const packageDataId = document.querySelector('#packageDataId').value.trim();
        const formData = JSON.stringify({'parkId': parkId, 'packageDataId': packageDataId});
        const setTemp = document.querySelector('#setTemp');
        ajax('POST', baseUrl + '/template/setPark', token, 'application/json', formData, function (data) {
            setTemp.innerText = JSON.stringify(data);
        });
    }

    function show() {
        const token = document.querySelector('#token').value.trim();
        const tempList = document.querySelector('#tempList');
        tempList.innerHTML = '';
        ajax('POST', baseUrl + '/template/getParks', token, null, {}, function (data) {
            for (let i in data.result) {
                const parkId = data.result[i].parkId;
                const title = data.result[i].title;
                const description = data.result[i].description;
                tempList.innerHTML += parkId + ' ' + title + ' ' + description + '<br>';
            }
        });
    }

    function login() {
        ajax('GET', baseUrl + '/test/getTestToken?userId=' + userId, null, null, null, function (data) {
            document.querySelector('#token').value = data.msg;
        });
    }

    function uploadDir() {
        const method = 'POST';
        const url = baseUrl + '/template/uploadParkFiles';
        const uploadDir = document.querySelector('#uploadDir');
        const token = document.querySelector('#token').value.trim();
        const dir = document.querySelector('#dir').files;
        let formData = new FormData();
        for (let index in dir) {
            const file = dir[index];
            formData.append('dir', file);
        }
        ajax(method, url, token, null, formData, function (data) {
            uploadDir.innerText = JSON.stringify(data);
        })
    }

    function ajax(method, url, token, contentType, formData, callback) {
        let xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.setRequestHeader('token', token);
        if (contentType)
            xhr.setRequestHeader('Content-Type', contentType);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                callback(JSON.parse(xhr.responseText));
            }
        };
        xhr.send(formData);
    }
</script>
</body>
</html>